<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
  <style>
    .spinner {
      margin: 100px auto 0;
      width: 150px;
      text-align: center;
    }

    .spinner > div {
      width: 30px;
      height: 30px;
      background-color: #67CF22;

      border-radius: 100%;

      /* Prevent first frame from flickering when animation starts */
    }
    .spinner .bounce1 {
      -webkit-animation: bouncedelay 1.4s infinite ease;
      animation: bouncedelay 1.4s infinite ease-in-out;

    }
    .spinner .bounce2 {
      -webkit-animation: bouncedelay 1.4s infinite ease-in;
      animation: bouncedelay 1.4s infinite ease;
/*      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;*/
    }
    .spinner .bounce3 {
      -webkit-animation: bouncedelay 1.4s infinite ease-out;
      animation: bouncedelay 1.4s infinite ease;
    }
    .spinner .bounce4 {
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease;
    }

    @-webkit-keyframes bouncedelay {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
    }
    @keyframes bouncedelay {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
    }
    /*@-webkit-keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
    }
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
    }*/
    .per{
      height: 100px;
      width: 100px;
      background-color: #67CF22;
      -webkit-transform: perspective(120px);
    }
    .spinner1 {
      width: 60px;
      height: 60px;
      background-color: #67CF22;

      margin: 100px auto;

    }
    .spinner1{
      -webkit-animation: rotateplane 1.2s infinite ease-in-out;
      animation: rotateplane 1.2s infinite ease-in-out;
    }
    .spinner2{
      -webkit-animation: rotateplane2 1.2s infinite ease-in-out;
      animation: rotateplane2 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes rotateplane {
      0% { -webkit-transform: perspective(120px) }
      50% { -webkit-transform: perspective(120px) rotateY(180deg) }
      100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }

    @keyframes rotateplane {
      0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
      } 50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
        } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          }
    }
    @-webkit-keyframes rotateplane2 {
      /*0% { -webkit-transform:  }*/
      50% { -webkit-transform:  rotateY(180deg) }
      100% { -webkit-transform:  rotateY(180deg)  rotateX(180deg) }
    }

    @keyframes rotateplane2 {
      0% {
        transform:  rotateX(0deg) rotateY(0deg);
        -webkit-transform:  rotateX(0deg) rotateY(0deg)
      } 50% {
          transform:  rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform:  rotateX(-180.1deg) rotateY(0deg)
        } 100% {
            transform:  rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform:  rotateX(-180deg) rotateY(-179.9deg);
          }
    }
    html,body{
      height: 100%;
    }
    .aa{
      display: inline-block;
      width: 100px;
      height: 100px;
      background: red;


    }
    .div1{
     /* transform: scaleY(1) translateY(0);*/
      position: relative;
      top: 10%;

    }
    .active{
      transform: scaleY(1.3) translateY(0);
      transition:transform 1s ease-in-out;
    }
  </style>

</head>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="height: 400px"><div class="div1 aa"></div><div class="aa"></div></div>

<body>
<div class="spinner" >
  <h2>ease 平滑过渡</h2>
  <div class="bounce1"></div>
  <h2>ease-in 由慢到快</h2>
  <div class="bounce2"></div>
  <h2>ease-out 由快到慢</h2>
  <div class="bounce3"></div>
  <h2>ease-in-out 由慢到快再到慢</h2>
  <div class="bounce4"></div>
  <h2>perspective</h2>
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>

<button style="margin-left: 350px" id="btn-click">点击</button>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
  $('#btn-click').on('click',function(){
    $('.div1').toggleClass('active');
  });

 /* $('.div1').on('transitionend',function(){
    var $target=$(this);
    $target.removeClass('active');
    setTimeout(function(){
      $target.addClass('active');
    },500);

  });*/


</script>
</body>
</html>
